<template>
  <!-- 挂号信息 -->
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="registration_information">
      <div class="visitor">
        <p class="title">
          <img
            src="https://cdn7.axureshop.com/demo/1763441/images/%E6%8C%82%E5%8F%B7%E8%AF%A6%E6%83%85-%E5%BE%85%E6%94%AF%E4%BB%98/u6246.png"
            alt="" />
          <span v-if="list.state == 1">待支付</span>
          <span v-else-if="list.state == 2">待取号</span>
          <span v-else-if="list.state == 3">已取号</span>
          <span v-else-if="list.state == 4">已取消</span>
          <span v-else-if="list.state == 5">已退号</span>
        </p>
        <div class="visitor_information">
          <h2 class="visitor_title">挂号信息</h2>
          <p>
            <span>患者：{{ patientname }}</span>
          </p>
          <p>
            <span>就诊日期：2023-{{ list.date }}&nbsp;&nbsp;周三</span>
          </p>
          <p>
            <span>诊时间：上午&nbsp;&nbsp;{{ list.time }}</span>
          </p>
          <p>
            <span>就诊医院：{{ list.hospitalname }}</span>
          </p>
          <p>
            <span>就诊科室：{{ list.department }}</span>
          </p>
          <p>
            <span>就诊医生： {{ list.doctor }}&nbsp;&nbsp;{{ list.position }}</span>
          </p>
          <p>
            <span>就诊序号： {{ number }}</span>
          </p>
          <p>
            <span>个人支付：{{ list.price }}</span>
          </p>
        </div>
      </div>
      <div class="registration_details">
        <div class="payment_information">
          <h2 class="visitor_title">支付信息</h2>
          <p>
            <span>订单号：{{ list.number }}</span>
          </p>
          <p>
            <span>支付金额：{{ list.price }}</span>
          </p>
          <p>
            <span>支付状态：<span v-if="list.state == 1">待支付</span>
              <span v-else-if="list.state == 2">待取号</span>
              <span v-else-if="list.state == 3">已取号</span>
              <span v-else-if="list.state == 4">已取消</span>
              <span v-else-if="list.state == 5">已退号</span></span>
          </p>
        </div>
        <div class="reminder_information">
          <h2 class="visitor_title">支付信息</h2>
          <p>
            <span>1、【取号】建议就诊当天候诊时间前取号，超过16：30未取号视为爽约，改号不退换</span>
          </p>
          <p>
            <span>2、【退号】未到就诊当天可在线退号，就诊当天未取号可在16：30前在自助机或窗口退号，预期将不可办理退号退费</span>
          </p>
        </div>
      </div>
    </div>
    <div class="confirm">
      <!-- <button class="btn_1">去支付</button>
      <button class="btn">取消预约</button> -->
      <p v-if="list.state == 1">
        <button class="btn_1" @click.stop="payAction(list._id)">
          立即支付
        </button>
        <button class="btn" @click.stop="cancellationAction(list._id, list.state)">
          取消预约
        </button>
      </p>
      <p v-else-if="list.state == 2">
        <button class="btn_1" @click.stop="retrievalAction(list._id, list.state)">
          取号
        </button>
        <button class="btn" @click.stop="refundAction(list._id, list.state)">
          退号
        </button>
      </p>
      <p v-else-if="list.state == 3">
        <button class="btn" @click.stop="deleteAction(list._id)">
          删除订单
        </button>
      </p>
      <p v-else-if="list.state == 4">
        <button class="btn" @click.stop="deleteAction(list._id)">
          删除订单
        </button>
      </p>
      <p v-else-if="list.state == 5">
        <button class="btn" @click.stop="deleteAction(list._id)">
          删除订单
        </button>
      </p>
    </div>
    <van-overlay :show="show" @click.stop="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <!-- 密码输入框 -->
          <van-password-input :value="value" :focused="showKeyboard" @focus="showKeyboard = true"
            :error-info="errorInfo" />
          <!-- 数字键盘 -->
          <van-number-keyboard v-model="value" :show="true" @blur="showKeyboard = false" />
          <!-- <van-button round type="info">圆形按钮</van-button> -->
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import navbar from "../../../components/navbar.vue";
import { Overlay, PasswordInput, NumberKeyboard, Button, Toast } from 'vant'
import {
  getRegister,
  patchRegister,
  deleteRegister,
} from "../../../api/register";
// import { getordeRegister } from "../../../api/register";
export default {
  data() {
    return {
      list: "",
      patientname: "",
      number: "",
      value: '',
      show: false,
      itemid: '',
      showKeyboard: false,
      errorInfo: '',
    };
  },
  components: {
    navbar,
    [Overlay.name]: Overlay,
    [PasswordInput.name]: PasswordInput,
    [NumberKeyboard.name]: NumberKeyboard,
    [Button.name]: Button,
    [Toast.name]: Toast
  },
  watch: {
    $route() {
      this.registerData();
    },
    value(value) {
      if (value.length === 6 && value !== '123456') {
        Toast('密码错误')
      } else if (value.length === 6 && value == '123456') {
        Toast('密码正确')
        this.payAction(this.itemid)
      }
    },
  },
  methods: {
    async registerData() {
      let id = this.$route.params.id;
      let res = await axios.request({
        method: "get",
        url: "/api/registeredOrder/getinfo",
        params: { _id: id },
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      });
      this.list = res.data.data;
      this.number = res.data.data.number.slice(7);
      let res1 = await axios.request({
        method: "get",
        url: "/api/registeredOrder/patient_id",
        params: { patientID: this.list.patientID },
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      });
      this.patientname = res1.data.datas[0].patientID.name;
    },
    // 支付
    async payAction(id) {
      this.show = true;
      this.itemid = id;
      if (this.value == "123456") {
        let res2 = await axios.request({
          method: "patch",
          url: "/api/registeredOrder",
          data: { _id: id, state: 2 },
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        });
        console.log("sdaafafsfsasf", res2);
        this.$router.replace({
          name: "PaymentResults",
          params: { text: "支付结果", id: this.itemid },
        });
      }
    },
    // 取消订单
    async cancellationAction(id, state) {
      console.log(id, state);
      const { data } = await patchRegister({
        _id: id,
        state: 4,
      });
      console.log("---取消订单---", data);
      this.registerData();
    },
    // 取号
    async retrievalAction(id, state) {
      console.log(id, state);
      const { data } = await patchRegister({
        _id: id,
        state: 3,
      });
      if (data) {
        Toast("取号成功");
      }
      console.log("---取号---", data);
      this.registerData();
    },
    // 退号
    async refundAction(id, state) {
      console.log(id, state);
      const { data } = await patchRegister({
        _id: id,
        state: 5,
      });
      console.log("---退号---", data);
      this.registerData();
    },
    // 删除订单
    async deleteAction(id) {
      const { data } = await deleteRegister({ _id: id });
      console.log("---删除订单---", data);
      Toast("已成功删除该订单");
      this.$router.back();
    },
  },
  created() {
    // console.log(this.$route.params.id);
  },
  mounted() {
    this.registerData();
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}

.registration_information {
  position: relative;
  z-index: 1;
  top: 46px;
  left: 0;
  height: calc(100% - vw(46));
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .visitor {
    background-color: #2ec7c9;
    width: 100%;
    height: vw(152);
    font-family: "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    position: relative;

    .title {
      color: #fff;
      padding-left: vw(20);
      padding-top: vw(25);
      box-sizing: border-box;
      display: flex;

      img {
        width: vw(18);
        height: vw(18);
        margin-right: vw(6);
      }
    }

    //挂号信息
    .visitor_information {
      position: absolute;
      background-color: #fff;
      width: vw(340);
      height: vw(379);
      top: vw(70);
      left: 50%;
      transform: translateX(-50%);
      border-radius: vw(5);
      padding-left: vw(35);
      box-sizing: border-box;
      font-size: vw(14);

      .visitor_title {
        padding-top: vw(10);
        padding-bottom: vw(25);
      }

      p {
        padding-bottom: vw(20);
      }
    }
  }

  //信息
  .registration_details {
    width: vw(340);
    margin: 0 auto;
    margin-top: vw(310);
    margin-bottom: vw(100);

    // 支付
    .payment_information,
    .reminder_information {
      background-color: #fff;
      padding-left: vw(35);
      padding-top: vw(10);
      padding-bottom: vw(20);
      box-sizing: border-box;
      font-family: MicrosoftYaHei, 微软雅黑;
      font-weight: 400;
      font-style: normal;
      font-size: vw(14);
      color: #333;
    }

    // 支付
    .payment_information {
      .visitor_title {
        padding-bottom: vw(25);
      }

      p {
        padding-bottom: vw(20);
      }
    }

    // 提示
    .reminder_information {
      margin-top: vw(10);
      padding-right: vw(20);

      .visitor_title {
        padding-bottom: vw(15);
      }

      p {
        padding-bottom: vw(10);
        line-height: vw(20);
      }
    }
  }
}

// 确认挂号
.confirm {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: vw(56);
  z-index: 1;
  font-size: vw(14);
  font-family: "ArialMT", "Arial";
  font-weight: 400;
  font-style: normal;
  padding-right: vw(20);
  box-sizing: border-box;

  button {
    width: vw(71);
    height: vw(31);
    float: right;
    margin-top: vw(13);
    margin-left: vw(10);
    border-radius: vw(5);
    font-family: "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: vw(13);
    border: none;
  }

  .btn {
    border: vw(1) solid #2ec7c9;
    color: #2ec7c9;
    background-color: transparent;
  }

  .btn_1 {
    background-color: #2ec7c9;
    color: #fff;
  }
}

ul {
  position: fixed;
  bottom: vw(260);
  left: 50%;
  transform: translateX(-50%);
}
</style>
